<template>
    <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
        <template #action>
            <div @click="onClickButton">搜索</div>
        </template>
    </van-search>
    <van-grid>
        <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
        <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
    </van-grid>
    <div class="pbl">
        <div style="width: 100%;height: 300px;">
            <span><img src="../views/img/image1.png" alt=""
                    style="width: 150px;height: 300px;margin-left: 10px;float: left;"></span>
            <span><img src="../views/img/image.png" alt="" style="width: 200px;height: 200px;margin-left: 10px;"></span>
        </div>
        <div style="width: 100%;height: 300px;margin-top: 10px;">
            <span><img src="../views/img/image1.png" alt=""
                    style="width: 150px;height: 300px;margin-left: 10px;float: left;"></span>
            <span><img src="../views/img/image.png" alt="" style="width: 200px;height: 200px;margin-left: 10px;"></span>
        </div>
        <div style="width: 100%;height: 300px;margin-top: 10px;">
            <span><img src="../views/img/image1.png" alt=""
                    style="width: 150px;height: 300px;margin-left: 10px;float: left;"></span>
            <span><img src="../views/img/image.png" alt="" style="width: 200px;height: 200px;margin-left: 10px;"></span>
        </div>
        <div style="width: 100%;height: 300px;margin-top: 10px;">
            <span><img src="../views/img/image1.png" alt=""
                    style="width: 150px;height: 300px;margin-left: 10px;float: left;"></span>
            <span><img src="../views/img/image.png" alt="" style="width: 200px;height: 200px;margin-left: 10px;"></span>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
let router = useRouter()
let onSearch = () => {
    router.push('/search')
}
import { catitemsApi } from '@/api/api';
import { ref } from 'vue';
let catitemsApiData = ref([])
catitemsApi().then(res => {
    catitemsApiData.value = res.data.message
})
</script>

<style lang="scss" scoped>
span {
    column-count: 2;
    column-gap: 20px;
}
</style>